<template>
  <div id="order-detail">
    <div class='order-header' style="border-bottom: 2px solid #58B7FF;padding-bottom: 10px;"><i
        class="el-icon-d-arrow-right" style="color: #58B7FF; font-size: 12px;"></i> 订单详情</div>
    <div style="margin: 20px 0;">
      <table style="width: 100%;">
        <tr>
          <td class="info-title">订单号：</td>
          <td class="info-content">{{dataProvider.orderNo}}</td>
          <td class="info-title">姓名：</td>
          <td class="info-content">{{dataProvider.orderElement.customerName}}</td>
        </tr>
        <tr v-if="dataProvider.orderIdentifier==='06'">
          <td class="info-title">原始订单号：</td>
          <td class="info-content">{{dataProvider.originalOrderNo}}</td>
        <tr>
          <td class="info-title">手机号：</td>
          <td class="info-content">{{dataProvider.orderElement.telephoneNo}}</td>
          <td class="info-title">机型：</td>
          <td class="info-content">{{dataProvider.brandName}} , {{dataProvider.modelName}} ,
            {{dataProvider.deviceColor}}</td>
        </tr>
        <tr>
          <td class="info-title">地址：</td>
          <td class="info-content">{{dataProvider.orderElement.province}} / {{dataProvider.orderElement.county}} /
            {{dataProvider.orderElement.address}}</td>
          <td class="info-title">服务方式：</td>
          <td class="info-content">{{dataProvider.serviceName}}</td>
        </tr>
        <tr>
          <td class="info-title">故障：</td>
          <td class="info-content" colspan="3">
            <span v-for="item in dataProvider.orderFailures" :key="item">（{{item.failureSubName}}）、</span>
          </td>
        </tr>
        <tr>
          <td class="info-title">预估总价：</td>
          <td class="info-content">{{dataProvider.price}} </td>
          <td class="info-title">实收：</td>
          <td class="info-content">{{dataProvider.actualPrice}}</td>
        </tr>
        <tr>
          <td class="info-title">订单标识：</td>
          <td class="info-content">{{dataProvider.orderIdentifierName}}</td>
          <td class="info-title" v-if="dataProvider.isAlive==='N'">无效原因：</td>
          <td class="info-content" v-if="dataProvider.isAlive==='N'">{{dataProvider.deadReason.dead_Reason}}</td>
          <td v-if="dataProvider.isCancel==='Y'" class="info-title">取消 时间 / 原因：</td>
          <td v-if="dataProvider.isCancel==='Y'" class="info-content">{{dataProvider.cancelTime}} /
            {{dataProvider.cancelReason.reason}}</td>
        </tr>
        <tr>
          <td class="info-title">状态：</td>
          <td class="info-content">{{dataProvider.adminStatusName}}</td>
          <td class="info-title">工程师：</td>
          <td class="info-content">{{dataProvider.engineerName}}</td>
        </tr>
        <tr>
          <td class="info-title">预约时间：</td>
          <td class="info-content">{{dataProvider.yyStr}}</td>
          <td class="info-title">创建时间：</td>
          <td class="info-content">{{dataProvider.createTime}}</td>
        </tr>
        <tr>
          <td class="info-title">客服备注：</td>
          <td class="info-content">{{dataProvider.serviceRemark}}</td>
          <td class="info-title">维修师备注：</td>
          <td class="info-content">{{dataProvider.wxsRemark}}</td>
        </tr>
        <tr>
          <td class="info-title">客户备注：</td>
          <td class="info-content">{{dataProvider.remark}}</td>
        </tr>
        <tr>
          <td class="info-title"></td>
          <td class="info-content">
            <el-button v-if="dataProvider.adminStatus === '06'&& btnclickYZF && dataProvider.isCancel==='Y'" type="text"
              @click="updateOrderToYZF">已支付</el-button>
          </td>
        </tr>
      </table>
    </div>
    <div slot="footer" class="dialog-footer" style="float: right; padding: 20px 0;">
      <el-button @click="canle">取消</el-button>
      <el-button type="primary" @click="canle">确认</el-button>
    </div>
  </div>
</template>

<script>
  import r from '../../utils/RequestUtil'
  import moment from 'moment'
  export default {
    name: "order_detail",
    data: function () {
      return {
        props: {
          faltProps: {
            value: "label",
            label: "label",
            children: "children"
          },
          cityProps: {
            value: "provinceName",
            label: "provinceName",
            children: "children"
          },
          brandProps: {
            value: "name",
            label: "name",
            children: "children"
          }
        },
        datalist: {
          faltlist: [],
          citylist: [],
          brandlist: [],
          serviceType: null,
          centerlist: [],
          storeList: [],
          canlereasonlist: []
        },
        btnclickYZF: true,

      }
    },
    methods: {
      changservice(value) {
        if (value === "DD") {
          this.dataProviderCopy.serviceType = "DD";
          this.dataProviderCopy.serviceName = "到店维修";
        } else if (value === "JS") {
          this.dataProviderCopy.serviceType = "JS";
          this.dataProviderCopy.serviceName = "寄送维修";
        } else if (value === "SM") {
          this.dataProviderCopy.serviceType = "SM";
          this.dataProviderCopy.serviceName = "上门维修";
        }
      },
      cancelreason() { //取消订单
        if (this.editinfo.canlereason == null || this.editinfo.canlereason == "" || typeof this.editinfo.canlereason ==
          "underfined") {
          r.message("请选择取消原因", "warning");
        } else {
          this.$emit("cancelreason", this.dataProvider.orderNo, this.editinfo.canlereason);
        }
      },
      updateOrderToYZF() { //已支付
      },
      addFlat() { //添加故障
        if (this.dataProviderCopy.orderFailures[this.dataProviderCopy.orderFailures.length - 1].price != null && this
          .dataProviderCopy.orderFailures[this.dataProviderCopy.orderFailures.length - 1].price != "" && typeof this
          .dataProviderCopy.orderFailures[this.dataProviderCopy.orderFailures.length - 1].price != "undefined") {
          this.dataProviderCopy.orderFailures.push({
            "price": 0
          })
        } else {
          r.message("您还有没选择的故障类型", "warning");
          return;
        }
      },
      citychange(value) {
        if (this.dataProviderCopy.orderElement.county !== value[2]) {
          this.dataProviderCopy.orderElement.province = value[0];
          this.dataProviderCopy.orderElement.city = value[1];
          this.dataProviderCopy.orderElement.county = value[2];
        }
      },
      faltchange(value) {
        if (this.dataProvider.brandName != null && this.dataProvider.brandName != "" && typeof this.dataProvider
          .brandName != "undefined") {
          for (let faltname of this.datalist.faltlist) {
            if (faltname.label === value[0]) {
              for (let falttype of faltname.children) {
                if (falttype.label === value[1]) {
                  for (let faltSolution of falttype.children) {
                    if (faltSolution.label === value[2]) {
                      for (let falttypeName of this.dataProvider.orderFailures) {
                        if (falttypeName.selectedFalt != null && falttypeName.selectedFalt != "" && typeof falttypeName
                          .selectedFalt != "undefined") {
                          if (falttypeName.selectedFalt[0] === value[0] && falttypeName.selectedFalt[1] === value[1] &&
                            falttypeName.selectedFalt[2] === value[2]) {
                            falttypeName.failureSubName = value[1];
                            falttypeName.solution = value[2];
                            falttypeName.orderNo = this.dataProvider.orderNo;
                            falttypeName.price = faltSolution.price;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          this.faltpricechange();
        } else {
          r.message("请先选择品牌", "warning");
        }
      },
      faltpricechange() {
        this.dataProviderCopy.price = 0;
        this.dataProviderCopy.actualPrice = 0;
        if (this.dataProviderCopy.orderFailures.length > 0) {
          for (let faltprice of this.dataProviderCopy.orderFailures) {
            if (faltprice.price === null || faltprice.price === "") {
              faltprice.price = 0;
              this.dataProviderCopy.price += parseInt(faltprice.price);
            } else {
              this.dataProviderCopy.price += parseInt(faltprice.price);
            }
          }
          this.dataProviderCopy.actualPrice = this.dataProviderCopy.price;
        }
      },
      changebrand(value) {
        if (this.dataProvider.brandName !== value[1] || this.dataProvider.modelName !== value[2] || this.dataProvider
          .deviceColor !== value[3]) {
          this.showfalts(value[1], value[2], value[3]);
          for (let selectitem of this.dataProviderCopy.orderFailures) {
            if (selectitem.selectedFalt != null && selectitem.selectedFalt != "" && typeof selectitem.selectedFalt !=
              "undefined") {
              selectitem.selectedFalt = new Array(0);
            }
            selectitem.price = parseInt(0);
          }
          this.faltpricechange();
        }
        this.dataProviderCopy.brandName = value[1];
        this.dataProviderCopy.modelName = value[2];
        this.dataProviderCopy.deviceColor = value[3];
      },
      showfalts(brandName, modelName, colorName) { //故障数据
        r.post('failureMainType/api/getAllPircesTreessByName' + '?t=' + Date.parse(new Date()), {
          brandName: brandName,
          modelName: modelName,
          colorName: colorName
        }, data => {
          this.datalist.faltlist = data.result;
        });
      },
      saveup() {
        if (this.modellist.shopName != null || this.modellist.shopName != "") {
          this.dataProviderCopy.orderService.shopName = this.modellist.shopName;
        }
        if (this.modellist.centerName != null || this.modellist.centerName != "") {
          this.dataProviderCopy.orderService.mainTainCenterName = this.modellist.centerName;
        }
        if (this.editinfo.serviceRemark != null || this.editinfo.serviceRemark != "") {
          this.dataProviderCopy.serviceRemark = this.editinfo.serviceRemark;
        }
        if (this.editinfo.wxsRemark != null || this.editinfo.wxsRemark != "") {
          this.dataProviderCopy.wxsRemark = this.editinfo.wxsRemark;
        }
        if (this.editinfo.customerName != null || this.editinfo.customerName != "") {
          this.dataProviderCopy.orderElement.customerName = this.editinfo.customerName;
        }
        if (this.editinfo.telephoneNo != null || this.editinfo.telephoneNo != "") {
          this.dataProviderCopy.orderElement.telephoneNo = this.editinfo.telephoneNo;
        }
        if (this.editinfo.address != null || this.editinfo.address != "") {
          this.dataProviderCopy.orderElement.address = this.editinfo.address;
        }
        if (this.modellist.serviceType != null || this.modellist.serviceType != "") {
          if (this.modellist.serviceType === "DD") {
            this.dataProviderCopy.serviceType = "DD";
            this.dataProviderCopy.serviceName = "到店维修";
          } else if (this.modellist.serviceType === "JS") {
            this.dataProviderCopy.serviceType = "JS";
            this.dataProviderCopy.serviceName = "寄送维修";
          } else if (this.modellist.serviceType === "SM") {
            this.dataProviderCopy.serviceType = "SM";
            this.dataProviderCopy.serviceName = "上门维修";
          }
        }
        this.dataProviderCopy.orderService.beginTime = moment(moment(this.editinfo.dated).format('YYYY-MM-DD') + " " +
          this.editinfo.startTime).toDate()
        this.dataProviderCopy.orderService.endTime = moment(moment(this.editinfo.dated).format('YYYY-MM-DD') + " " +
          this.editinfo.endTime).toDate()

        this.$emit("saveup", this.dataProviderCopy);

      },
      canle() {
        this.$emit("canle");
      }
    },
    computed: {
      dataProviderCopy() {
        var newObject = {};
        Object.assign(newObject, this.dataProvider);
        return newObject;
      }
    },
    props: {
      dataProvider: {
        type: Object,
        required: true
      },
      editinfo: {
        type: Object,
        required: true
      },
      modellist: {
        type: Object,
        required: true
      },
    },
    mounted: function () {}
  }

</script>

<style scoped="scoped">
  .info-title {
    padding: 0 5px 0 10px;
  }

  .info-title {
    text-align: right;
  }

  .info-content {
    text-align: left;
    padding-right: 10px;
  }

  tr {
    line-height: 28px;
  }

  .el-select {
    width: 100%;
  }

</style>
